<template>
  <div id="table-list-wrapper" class="table-container">
    <div id="header">
      <span class="name">历史降雨量</span>
    </div>
    <div id="close" @click.stop="close"></div>
    <div id="table-list">
      <div class="thead">
        <div class="left">
          <div class="row-two">
            <span class="value">年份</span>
          </div>
        </div>
        <div class="right">
          <div class="row bottom">
            <span class="value">t/min</span>
          </div>
          <div class="row">
            <span class="value" v-for="(item, index) of dataList.thead">{{ item }}</span>
          </div>
        </div>
      </div>
      <div class="tbody">
        <div class="row" :class="{ dark: index % 2 == 0 }" v-for="(item, index) of dataList.list">
          <span class="value year">{{ item.year }}</span>
          <span class="value" v-for="(value, index) of item.value">{{ value }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, provide, watch, ref } from "vue";
import { rainData } from './waterData'

export default defineComponent({
  emits: ['closeTable'],
  setup(props, ctx) {
    const dataList = ref(rainData)
    function close() {
      ctx.emit('closeTable')
    }
    return {
      dataList,
      close
    }
  }
})
</script>

<style scoped>
#table-list-wrapper {
  position: fixed;
  width: 80vw;
  height: 80vh;
  top: 10vh;
  left: 10vw;
  background-color: transparent;
  background-image: url('~@/assets/外框1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#header {
  width: 30vw;
  height: 2.8vw;
  margin: 0 auto;
  margin-top: 2vh;
  text-align: center;
  background-color: transparent;
  background-image: url('~@/assets/小标题装饰.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#header .name {
  font-size: 1.5rem;
  color: #fff;
}

#close {
  position: absolute;
  top: 1.3vw;
  right: 1.3vw;
  width: 1.2vw;
  height: 1.2vw;
  background-color: transparent;
  background-image: url('~@/assets/关闭.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

#close:hover {
  background-size: 110% 110%;
}

#table-list {
  color: #fff;
  width: 90%;
  height: calc(100% - 6vh);
  margin: 0 auto;
  margin-top: 15px;
}

#table-list .thead {
  display: flex;
  background-color: rgba(81, 168, 255, 0.22);
}

#table-list .thead .row-two {
  height: 4vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#table-list .thead .row-two .value {
  flex: 1;
  text-align: center;
  color: #fff;
  line-height: 0px;
  -webkit-background-clip: text;
  font-size: 1vw;

}

#table-list .thead .row {
  height: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#table-list .thead .row.bottom {
  border-bottom: 0.5px solid rgba(239, 239, 239, 0.2);
}

#table-list .thead .row .value {
  flex: 1;
  text-align: center;
  color: #fff;
  line-height: 0px;
  -webkit-background-clip: text;
  font-size: 1vw;

}

#table-list .thead .left {
  width: 6vw;
  background-color: rgba(70, 156, 255, 0.19);
}

#table-list .thead .right {
  width: 100%;
}

#table-list .tbody {
  height: calc(100% - 6vw);
  overflow-y: auto;
  padding: 5px 0 15px 0;

}

#table-list .tbody .row {
  height: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#table-list .tbody .row.dark {
  background-color: rgba(71, 169, 255, 0.1);
}

#table-list .tbody .row.bottom {
  border-bottom: 0.5px solid #efefef;
}

#table-list .tbody .row .value {
  flex: 1;
  text-align: center;
  color: #fff;
  line-height: 0px;
  -webkit-background-clip: text;
  font-weight: 400;
  font-size: 1vw;
}

#table-list .tbody .row .value.year {
  width: 6vw;
  flex: inherit;
}
</style>